type IconProps = {
  className?: string;
};

export const CloudflareIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M16.5298 17.2297C16.6099 16.9948 16.6381 16.7427 16.6122 16.4938C16.5862 16.2449 16.5067 16.0062 16.3805 15.7982C16.2508 15.6262 16.0916 15.4843 15.9123 15.3805C15.7329 15.2768 15.5368 15.2128 15.3351 15.1929L6.67287 15.0827C6.64797 15.0827 6.62308 15.069 6.59819 15.0553C6.57329 15.0416 6.5484 15.0279 6.52351 15.0279C6.51192 15.0182 6.50252 15.0058 6.49603 14.9913C6.48956 14.9768 6.48619 14.9612 6.48619 14.9451C6.48619 14.929 6.48956 14.9134 6.49603 14.8989C6.50252 14.8844 6.51192 14.872 6.52351 14.8623C6.53987 14.8263 6.55624 14.7962 6.57435 14.772C6.61139 14.722 6.65579 14.6973 6.72263 14.6973L15.4345 14.5871C15.9877 14.5194 16.5144 14.2898 16.9606 13.9221C17.4069 13.5545 17.7564 13.0621 17.9734 12.4955L18.4713 11.0645C18.4713 11.0462 18.4768 11.028 18.4824 11.0097C18.4935 10.9726 18.5044 10.936 18.4713 10.8995C18.2006 9.56636 17.5439 8.36763 16.6007 7.48497C15.6576 6.6023 14.4798 6.08464 13.2461 6.00938C12.0124 5.93467 10.7904 6.30773 9.76569 7.07105C8.74101 7.83437 7.96969 8.94657 7.56895 10.2388C7.04869 9.82815 6.41413 9.63302 5.77678 9.68839C5.19186 9.76041 4.64654 10.0502 4.23039 10.5103C3.81423 10.9704 3.552 11.5736 3.48679 12.2202C3.45363 12.5514 3.47046 12.8863 3.53657 13.211C2.59017 13.24 1.69132 13.6759 1.03123 14.4264C0.371134 15.1768 0.00187572 16.1825 0.00201245 17.2297C-0.00616106 17.4329 0.0105886 17.6366 0.0517904 17.835C0.0540769 17.878 0.0705454 17.9183 0.098074 17.9489C0.125603 17.9796 0.162277 17.9978 0.201139 18H16.1813C16.2809 18 16.3805 17.9452 16.3805 17.835L16.5298 17.2297Z"
      fill="currentColor"
    />
    <path
      d="M19.2707 11.064H19.0217C18.972 11.064 18.9222 11.1188 18.8724 11.1742L18.5239 12.4949C18.4438 12.7299 18.4156 12.982 18.4416 13.2309C18.4676 13.4797 18.5471 13.7184 18.6733 13.9265C18.803 14.0985 18.9621 14.2404 19.1415 14.3441C19.3209 14.4479 19.517 14.5118 19.7187 14.5317L21.5607 14.6419C21.5856 14.6419 21.6104 14.6556 21.6353 14.6693C21.6602 14.683 21.6851 14.6968 21.7101 14.6968C21.7216 14.7064 21.731 14.7188 21.7375 14.7333C21.744 14.7478 21.7474 14.7634 21.7474 14.7795C21.7474 14.7957 21.744 14.8113 21.7375 14.8258C21.731 14.8403 21.7216 14.8526 21.7101 14.8623C21.6602 14.972 21.6105 15.0273 21.5109 15.0273L19.6191 15.1376C19.0661 15.2053 18.5393 15.4348 18.093 15.8025C17.6469 16.1702 17.2973 16.6626 17.0802 17.2292L16.9807 17.7242C16.9308 17.7796 16.9807 17.8898 17.0802 17.8898H23.6516C23.6718 17.893 23.6925 17.8909 23.7119 17.8834C23.7155 17.8821 23.719 17.8806 23.7225 17.8789C23.7263 17.877 23.7301 17.8749 23.7338 17.8726C23.7447 17.8662 23.7547 17.8581 23.7635 17.8484C23.778 17.8323 23.789 17.8129 23.7954 17.7914C23.8019 17.7699 23.8038 17.7468 23.8009 17.7242C23.9194 17.2582 23.9863 16.7776 24 16.2933C23.9922 14.9091 23.4913 13.584 22.6061 12.6051C21.7209 11.6263 20.5225 11.0726 19.2707 11.064Z"
      fill="currentColor"
    />
  </svg>
);

export const DigitalOceanIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M12.009 21V17.5136C15.7122 17.5136 18.5608 13.8493 17.1543 9.97168C16.6202 8.53082 15.4808 7.37467 14.0385 6.85878C10.1572 5.45355 6.48975 8.29964 6.48975 11.9994H3C3 6.11171 8.69725 1.52248 14.8755 3.4436C17.5816 4.27958 19.7181 6.43188 20.5549 9.11781C22.4776 15.308 17.9021 21 12.009 21Z"
      fill="currentColor"
    />
    <path
      d="M8.53713 17.5136H12.009V14.045H8.53713V17.5136Z"
      fill="currentColor"
    />
    <path
      d="M5.86652 17.5136V20.1818H8.53713V17.5136H5.86652Z"
      fill="currentColor"
    />
    <path
      d="M5.86652 17.5136V15.2902H3.62323V17.5136H5.86652Z"
      fill="currentColor"
    />
  </svg>
);

export const NeonIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M3 6.10371C3 4.38857 4.38949 3 6.10331 3H17.8973C19.6111 3 21 4.38921 21 6.10371V16.1336C21 17.9066 18.7565 18.6761 17.6683 17.2766L14.2662 12.8994V18.2068C14.2662 19.7496 13.0156 21 11.4726 21H6.10331C4.38949 21 3 19.6108 3 17.8963V6.10371ZM6.10331 5.48271C5.93917 5.48271 5.78174 5.54806 5.66543 5.66445C5.54914 5.78082 5.48345 5.93877 5.48278 6.10371V17.8963C5.48278 18.2396 5.76106 18.5173 6.10331 18.5173H11.5659C11.7374 18.5173 11.7835 18.3784 11.7835 18.2068V11.0904C11.7835 9.31607 14.027 8.54721 15.1152 9.94671L18.5179 14.3239V6.10371C18.5179 5.76043 18.5498 5.48271 18.2076 5.48271H6.10331Z"
      fill="currentColor"
    />
  </svg>
);

export const RQLiteIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path d="M9 3H16V10L9 3Z" fill="currentColor" fillOpacity="0.8" />
    <path d="M16 3L21 8V9L16 14V3Z" fill="currentColor" fillOpacity="0.6" />
    <path
      d="M21 16V9L14 16H10L15 21H16L21 16Z"
      fill="currentColor"
      fillOpacity="0.4"
    />
    <path d="M8 14L15 21H8V14Z" fill="currentColor" fillOpacity="0.6" />
    <path d="M8 10V21L3 16V15L8 10Z" fill="currentColor" fillOpacity="0.8" />
    <path d="M10 8H14L9 3H8L3 8V15L10 8Z" fill="currentColor" />
  </svg>
);

export const StarbaseIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M11.9999 3C7.05137 3 3 7.04669 3 12.0132C3 16.9795 7.05137 21 11.9999 21C16.9758 21 21 16.9795 21 12.0132C21 7.04669 16.9758 3 11.9999 3ZM15.3444 18.2146L15.3172 18.2672C14.8278 18.8453 14.2568 19.0292 13.8489 19.0818C13.7674 19.1081 13.6586 19.1081 13.5499 19.1081C12.4351 19.1081 11.3475 18.3723 10.3414 16.9533C9.55285 15.7971 8.84588 14.273 8.38363 12.6438C7.54081 9.72696 7.64958 7.07297 8.62835 5.86427C9.0906 5.28615 9.66162 5.1022 10.0695 5.04965C11.2115 4.89198 12.3534 5.57521 13.4139 6.96785C14.284 8.12409 15.0452 9.72696 15.5347 11.4876C16.3504 14.3518 16.2688 16.9795 15.3444 18.2146Z"
      fill="currentColor"
    />
  </svg>
);

export const TursoIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M23.9976 7.71915C23.4372 4.4319 20.4984 2 20.4984 2V5.62138L18.7536 6.06258L17.6604 4.77192L17.0832 5.88493C15.8928 5.56726 14.2536 5.36254 11.9988 5.36254C9.744 5.36254 8.1048 5.56844 6.9144 5.88493L6.3372 4.77192L5.244 6.06258L3.4992 5.62138V2C3.4992 2 0.5604 4.4319 0 7.71915L3.8568 9.02746C3.9828 11.3135 5.0316 17.4844 5.3316 18.0445C5.6508 18.641 7.3452 20.3458 8.6712 21.0011C8.6712 21.0011 9.1512 20.5034 9.444 20.0646C9.816 20.494 11.7372 22 12 22C12.2628 22 14.184 20.4952 14.556 20.0646C14.8488 20.5034 15.3288 21.0011 15.3288 21.0011C16.6548 20.3458 18.3492 18.641 18.6684 18.0445C18.9684 17.4844 20.0172 11.3135 20.1432 9.02746L24 7.71915H23.9976ZM18.4548 12.983L15.8448 13.2113L16.074 16.3491C16.074 16.3491 14.4864 17.6374 11.9988 17.6374C9.5112 17.6374 7.9236 16.3491 7.9236 16.3491L8.1528 13.2113L5.5428 12.983L5.0964 9.44866L9.4224 10.917L9.0864 15.3161C9.8904 15.5161 10.7364 15.7149 12 15.7149C13.2636 15.7149 14.1084 15.5161 14.9124 15.3161L14.5764 10.917L18.9024 9.44866L18.456 12.983H18.4548Z"
      fill="currentColor"
    />
  </svg>
);

export const SupabaseIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <g clipPath="url(#clip0_3293_1440)">
      <path
        d="M14.1049 21.5434C13.6065 22.1489 12.5958 21.8172 12.5838 21.0441L12.4082 9.73633H20.2905C21.7182 9.73633 22.5145 11.327 21.6267 12.4055L14.1049 21.5434Z"
        fill="url(#paint0_linear_3293_1440)"
      />
      <path
        d="M10.8989 3.34836C11.3973 2.74282 12.408 3.07461 12.42 3.84774L12.497 15.1555H4.71329C3.28555 15.1555 2.48927 13.5648 3.37708 12.4863L10.8989 3.34836Z"
        fill="currentColor"
      />
    </g>
    <defs>
      <linearGradient
        id="paint0_linear_3293_1440"
        x1="12.4082"
        y1="12.2435"
        x2="19.3363"
        y2="15.2558"
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="currentColor" stopOpacity="0.8" />
        <stop offset="1" stopColor="currentColor" />
      </linearGradient>
      <clipPath id="clip0_3293_1440">
        <rect
          width="19"
          height="19"
          fill="currentColor"
          transform="translate(3 3)"
        />
      </clipPath>
    </defs>
  </svg>
);

export const ValTownIcon = ({ className }: IconProps) => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path
      d="M19.9529 20.2895C19.0828 20.2895 18.3773 20.0192 17.8361 19.4783C17.2944 18.9376 17.0241 18.2146 17.0241 17.3105V9.86261H15.6499L10.5967 18.6002C9.9919 19.6463 8.8745 20.2905 7.66547 20.2905H5.38522C4.18223 20.2905 3.20678 19.316 3.20678 18.1142V9.86361H0V7.09709H4.5389C5.65605 7.09709 6.56162 8.00181 6.56162 9.11787V17.8431H7.04088L12.6184 8.60089C13.1807 7.66902 14.1898 7.09803 15.2785 7.09634H17.0241V3H20.3787V7.09634H24V9.86261H20.3787V16.7251C20.3787 17.2571 20.6273 17.5233 21.1244 17.5233H23.6803V20.2895H19.9529Z"
      fill="currentColor"
    />
  </svg>
);
